<template>
  <div style="border: 1px solid #ccc">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor style="height: 540px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode"
      @onCreated="handleCreated" />
  </div>
</template>
<script setup>
import "@wangeditor/editor/dist/css/style.css"; // 引入编辑器样式
import { ElMessage } from "element-plus";

import {
  ref,
  shallowRef,
  onMounted,
  onBeforeUnmount,
  watch,
  watchEffect,
} from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { el } from "element-plus/es/locales.mjs";
//声明属性

const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
});
// 声明事件消息
const emits = defineEmits(["update:modelValue"]);

// 编辑器实例（使用 shallowRef 避免深度响应）
const editorRef = shallowRef();

// 内容 HTML（使用 ref 响应式数据）
const valueHtml = ref();


// 在 watchEffect 中添加对 editorRef 的存在性检查
watchEffect(() => {
  if (editorRef.value && props.modelValue !== editorRef.value.getHtml()) {
    editorRef.value.setHtml(props.modelValue);
  }
});
// 监听valueHtml变化，告诉父组件
watch(valueHtml, (newVal) => {
  emits("update:modelValue", newVal);
});

// 工具栏配置（空对象）
const toolbarConfig = {};

// 编辑器配置
const editorConfig = {
  MENU_CONF: {
    uploadImage: {
      server: "http://localhost:8001/article/upload",
      fieldName: "image",
      maxFileSize: 1024 * 1024 * 5, //限制图片大小5M
      customInsert(res, insertFn) {
        console.log("Server response:", res); // 添加日志
        // res 即服务端的返回结果
        if (res.code === 200) {
          console.log("Inserting image URL:", res.img_url); // 添加日志
          insertFn(res.img_url);
          ElMessage.success(data.msg);
        } else {
          ElMessage.error(res.msg);
        }
      },
    },
  },
};

// 在 handleCreated 中强制销毁旧实例
const handleCreated = (editor) => {
  if (editorRef.value) {
    editorRef.value.destroy(); // 先销毁旧实例
  }
  editorRef.value = editor; // 新实例赋值
  console.log("Editor created:", editor);
};

// 在 onBeforeUnmount 中确保销毁
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor) {
    editor.destroy();
    editorRef.value = null; // 显式置空引用
  }
});

// 模板中需要的静态模式
const mode = "default";
</script>